<template>
  <div class="order-container">
    <div class="avatar">你好,{{ name }}</div>
    <el-button class="logout" @click="logout">退出登录</el-button>
    <div class="title">用户中心</div>

    <div class="content">
      <div class="item" style="overflow-y: auto">
        <div style="text-align: center">进行预约下单</div>

        <el-alert
          style="margin: 20px 0; text-align: center"
          title="提示:预估价格不代表最终价格,最终价格为订单完成时协商为准!"
          type="warning"
        />

        <el-form
          :rules="rules"
          style="margin-top: 20px"
          ref="formEl"
          :model="order"
          label-width="80px"
        >
          <el-form-item label="出发点" prop="startPlace">
            <el-input :maxlength="100" v-model="order.startPlace"></el-input>
          </el-form-item>
          <el-form-item label="终点" prop="endPlace">
            <el-input :maxlength="100" v-model="order.endPlace"></el-input>
          </el-form-item>
          <el-form-item label="距离(km)" prop="distance">
            <el-input-number
              @change="caclPrice"
              style="width: 100%"
              placeholder="5元/千米"
              :controls="false"
              v-model="order.distance"
              :min="0"
              :max="10000"
              :precision="2"
              label="距离"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="车辆类型" prop="carTypeId">
            <el-select
              @change="caclPrice"
              v-model="order.carTypeId"
              style="width: 100%"
              placeholder="车辆类型"
            >
              <el-option
                v-for="item in carTypeList"
                :label="item.name + '(' + item.price + '元)'"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="搬家时间" prop="moveTime">
            <el-date-picker
              :disabled-date="disableddate"
              type="datetime"
              placeholder="选择时间"
              v-model="order.moveTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="附加情况">
            <el-select
              @change="caclPrice"
              style="width: 100%"
              v-model="order.extInfoIds"
              multiple
              placeholder="请选择额外服务"
            >
              <el-option
                v-for="item in extOptions"
                :key="item.id"
                :label="item.name+'('+item.price+'元)'"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              :maxlength="255"
              type="textarea"
              v-model="order.remark"
            ></el-input>
          </el-form-item>
          <el-form-item label="预估价格">
            <el-input-number
              style="width: 100%"
              disabled
              :controls="false"
              v-model="order.price"
              :precision="2"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="onSubmit"
              >立即预约</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="item">
        <div style="text-align: center">我的订单列表</div>

        <div class="order-item" v-for="(item, index) in myOrderList">
          <div class="state">
            {{ item.stateName }}
            <el-popconfirm
              v-if="item.state == 1"
              title="确定取消该订单?"
              @confirm="goCancelOrder(item.id, index)"
            >
              <template #reference>
                <el-button>取消订单</el-button>
              </template>
            </el-popconfirm>
            <!-- <el-popconfirm
              v-if="item.state == 4"
              :title="`确定支付¥${item.realPrice}?`"
              @confirm="goPayOrder(item.id, index)"
            >
              <template #reference>
                <el-button type="primary">支付结算</el-button>
              </template>
            </el-popconfirm> -->

            <el-popover
              placement="bottom"
              title=""
              :width="200"
              trigger="click"
               v-if="item.state == 4"
            >
              <div class="pay-warp">
                <div class="scanloader">
                  <em></em>
                  <div>
                    <vue-qrcode
                      @click="goPayOrder(item.id, index)"
                      value="赶紧点一下二维码就支付成功了😝"
                      :options="{ width: 200 }"
                    ></vue-qrcode>
                  </div>
                  <span></span>
                </div>

                <div>支付金额: <span style="font-size: 26px;
    color: #FF6700;">{{item.realPrice}}</span> 元 <span style="text-decoration: line-through;">{{item.price}}元</span></div>
                <div style="display: flex;align-items: center;color: gray;justify-content: center;"> <img src="../../assets/pay.png">扫描支付更轻松</div>
              </div>

              <template #reference>
                <el-button type="primary">支付结算</el-button>
              </template>
            </el-popover>
          </div>
          <div class="place-info">
            <div>
              起点:<span style="font-weight: 500">{{ item.startPlace }}</span
              >→终点:<span style="font-weight: 500">{{ item.endPlace }}</span>
            </div>
            <div>{{ item.distance }}KM</div>
          </div>
          <div style="display: flex; justify-content: space-between">
            <div>
              预约时间:<span style="font-weight: 500">{{ item.moveTime }}</span>
            </div>
            <div>
              车辆类型:<span style="font-weight: 500">{{
                item.carTypeName
              }}</span>
              <span v-if="item.carNumber" style="font-weight: 500"
                >({{ item.carNumber }})</span
              >
            </div>
            <!-- <img src="/src/assets/car.png"> -->
          </div>
          <div v-if="item.extInfo != ''">
            附加情况:<span style="font-weight: 500">{{ item.extInfo }}</span>
          </div>
          <div v-if="item.remark != ''">
            备注:<span
              style="font-weight: 400; font-size: 14px; color: #505050"
              >{{ item.remark }}</span
            >
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 20px;
            "
          >
            <div>下单时间:{{ item.createTime }}</div>
            <div>
              预计总价:¥<span
                :style="
                  'font-weight: 500;' +
                  (item.realPrice ? 'text-decoration: line-through;' : '')
                "
                >{{ item.price }}</span
              >
              <span
                v-if="item.state == 4 || item.state == 5"
                style="margin-left: 20px"
                >实际价格:¥<span style="font-weight: 500">{{
                  item.realPrice
                }}</span></span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const logout = () => {
  localStorage.removeItem("userId");
  localStorage.removeItem("username");
  localStorage.removeItem("name");
  router.push("/");
};

const username = localStorage.getItem("username");
const name = localStorage.getItem("name");

const formEl = ref();

const order = ref({
  startPlace: null,
  endPlace: null,
  distance: undefined,
  carTypeId: null,
  startPlace: null,
  startPlace: null,
  price: undefined,
  extInfoIds: [],
  userId: localStorage.getItem("userId"),
});

const caclPrice = () => {
  let price = 0;
  if (order.value.distance) {
    price += order.value.distance * 5;
  }

  if (order.value.carTypeId) {
    carTypeList.some((c) => {
      if (c.id == order.value.carTypeId) {
        price += c.price;
        return true;
      }
    });
  }

  order.value.extInfoIds.forEach((id) => {
    extOptions.some((e) => {
      if (e.id == id) {
        price += e.price;
        return true;
      }
    });
  });
  order.value.price = price;
};

import {
  reservation,
  getExtInfoList,
  getCarTypeList,
  getMyOrder,
  cancelOrder,
  payOrder,
} from "../../api/order";

import { ElMessage } from "element-plus";

const goCancelOrder = (id, index) => {
  cancelOrder(id).then((res) => {
    ElMessage.success("取消成功");
    myOrderList.value.splice(index, 1, res.data);
  });
};

const goPayOrder = (id, index) => {
  payOrder(id).then((res) => {
    ElMessage.success("支付成功");
    myOrderList.value.splice(index, 1, res.data);
  });
};

const myOrderList = ref([]);

getMyOrder(localStorage.getItem("userId")).then((res) => {
  myOrderList.value.push(...res.data);
});

const extOptions = reactive([]);

getExtInfoList().then((res) => {
  extOptions.push(...res.data);
});

const carTypeList = reactive([]);

getCarTypeList().then((res) => {
  carTypeList.push(...res.data);
});

const onSubmit = (e) => {
  console.log(formEl.value);
  formEl.value.validate((valid) => {
    if (valid) {
      reservation(order.value).then((res) => {
        ElMessage.success("下单成功");
        myOrderList.value.unshift(res.data);
        order.value = {
          startPlace: null,
          endPlace: null,
          distance: undefined,
          carTypeId: null,
          startPlace: null,
          startPlace: null,
          price: undefined,
          extInfoIds: [],
          userId: localStorage.getItem("userId"),
        };
        formEl.value.resetFields();
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const disableddate = (time) => {
  //如果没有后面的-8.64e7就是不可以选择今天的
  return time.getTime() < Date.now() - 8.64e7;
};

const rules = reactive({
  startPlace: [
    {
      required: true,
      message: "请输入出发点",
      trigger: "blur",
    },
  ],
  endPlace: [
    {
      required: true,
      message: "请输入终点",
      trigger: "blur",
    },
  ],
  distance: [
    {
      required: true,
      message: "请输入距离",
      trigger: "blur",
    },
  ],
  carTypeId: [
    {
      required: true,
      message: "请选择车辆类型",
      trigger: "change",
    },
  ],
  moveTime: [
    {
      required: true,
      message: "请选择车辆类型",
      trigger: "change",
    },
  ],
});
</script>

<style scoped lang="less">
.order-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #f1f1f1;

  .logout {
    width: 100px;
    right: 20px;
    top: 20px;
    position: absolute;
  }

  .avatar {
    width: fit-content;
    padding: 10px;
    background-color: forestgreen;
    border-radius: 40px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    top: 20px;
    left: 20px;
    font-weight: 700;
  }

  .title {
    height: 100px;
    text-align: center;
    color: deepskyblue;
    font-size: 48px;
    text-shadow: 2px 2px 2px #000;
  }

  .content {
    flex: 1;
    height: calc(100vh - 100px);
    display: flex;
    padding: 20px;

    .item {
      overflow-y: scroll;
      background-color: #fff;
      width: 50%;
      margin-right: 20px;
      padding: 20px;
      flex: 1;
      border-radius: 10px;
      box-shadow: 5px 5px 10px rgb(107, 107, 107);
      &:last-child {
        margin-right: 0;
      }

      .order-item {
        position: relative;
        margin-top: 20px;
        padding: 20px;
        border-radius: 10px;
        background-color: #c3e3ff;
        box-shadow: 2px 2px 5px rgb(107, 107, 107);

        .state {
          color: orange;
          font-weight: 500;
          position: absolute;
          top: 20px;
          right: 20px;
        }

        .place-info {
          div {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>

<style lang="less" scoped>
.pay-warp {
  background-color: #fff;
}

.scanloader {
  width: 200px;
  height: 200px;
  position: relative;
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%,-50%);
  backface-visibility: hidden;
  border: 1px solid #fff;
  span {
    position: absolute;
    left: 2px;
    top: 0;
    width: 194px;
    height: 2px;
    background: radial-gradient(red -24%, yellow 100%);
    z-index: 1;
    animation: move 3s cubic-bezier(0.15, 0.44, 0.76, 0.64);
    animation-iteration-count: infinite;
  }
  > div {
    z-index: 1;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
    // width: 48%;
    backface-visibility: hidden;
  }
  &:before,
  &:after,
  em:after,
  em:before {
    border-color: #1aad19;
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-width: 0px;
  }
  &:before {
    left: -1px;
    top: -1px;
    border-left-width: 2px;
    border-top-width: 2px;
  }
  &:after {
    right: -1px;
    top: -1px;
    border-right-width: 2px;
    border-top-width: 2px;
  }
  em:before {
    left: -1px;
    bottom: -1px;
    border-left-width: 2px;
    border-bottom-width: 2px;
  }
  em:after {
    right: -1px;
    bottom: -1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }
}

@keyframes move {
  0%,
  100% {
    transform: translateY(10000%);
  }
  0% {
    transform: translateY(0%);
  }
}
</style>
